<template>
  <div class="container">
    <div class="mask"></div>
    <div class="photo">
      <el-image :src="previewPhoto" @error="imageError" />
      <div class="closeBtn" @click="back">
        <el-icon><Close /></el-icon>
      </div>
      <div class="indicate_left" @click="pre">
        <span style="font-size: 1.3rem; line-height: 55px">
          <el-icon><ArrowLeftBold /></el-icon
        ></span>
      </div>
      <div class="indicate_right" @click="nxt">
        <span style="font-size: 1.3rem; line-height: 55px">
          <el-icon><ArrowRightBold /></el-icon
        ></span>
      </div>
      <div class="dot" @click="swichPhoto">
        <div
          class="dot_item"
          v-for="(item, index) in urlArray"
          :key="index"
          :index="index"
        ></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, Ref, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import { hideElement } from "../utils/hideElement";
import { ElMessage } from "element-plus";

export default {
  name: "Preview",
  setup() {
    const router = useRouter();
    const url: any = router.currentRoute.value.query.url;
    const urlArray: Array<string> = url.split(",");

    onMounted(() => {
      const triggerElement: HTMLElement = document.querySelector(".el-image");
      const indicateLeft: HTMLElement =
        document.querySelector(".indicate_left");
      const indicateRight: HTMLElement =
        document.querySelector(".indicate_right");
      hideElement(triggerElement, indicateLeft, indicateRight);

      //初始化第一个按钮
      const firstDot: HTMLElement = document.querySelector(`div[index="0"]`);
      firstDot.classList.add("active");
    });

    let previewPhoto: Ref<string> = ref("");
    let activeDot: Ref<number> = ref(0);

    previewPhoto.value = urlArray[0];

    //图片加载错误回调函数
    function imageError(): void {
      ElMessage.error("图片加载错误");
    }

    function back() {
      router.back();
    }

    //点位触发切换
    function swichPhoto(e) {
      const clickElement: HTMLElement = e.target;
      const clickElements: any = clickElement.parentElement.children;
      previewPhoto.value = urlArray[e.target.getAttribute("index")];
      for (let i = 0; i < clickElements.length; i++) {
        clickElements[i].classList.remove("active");
      }
      clickElement.classList.add("active");
    }
    //左切换
    function pre() {
      if (activeDot.value > 0) {
        activeDot.value--;
      }
    }
    //右切换
    function nxt() {
      if (activeDot.value < urlArray.length - 1) {
        activeDot.value++;
      }
    }

    //监听点变化
    watch(
      () => activeDot.value,
      (newVal, oldValue) => {
        const selectElement: HTMLElement = document.querySelector(
          `div[index="${newVal}"]`
        );
        const clickElements: any = selectElement.parentElement.children;
        for (let i = 0; i < clickElements.length; i++) {
          clickElements[i].classList.remove("active");
        }
        selectElement.classList.add("active");
        previewPhoto.value = urlArray[newVal];
      }
    );

    return {
      url,
      back,
      imageError,
      activeDot,
      previewPhoto,
      urlArray,
      swichPhoto,
      pre,
      nxt,
    };
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.photo {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  z-index: 9;
}
.el-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.closeBtn {
  position: absolute;
  top: -9%;
  right: -5%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  font-size: 1.5rem;
  line-height: 56px;
  color: #fff;
}
.indicate_left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  visibility: hidden;
}
.indicate_left:hover {
  cursor: pointer;
  color: #409eff;
  visibility: visible;
}
.indicate_right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  visibility: hidden;
}
.indicate_right:hover {
  cursor: pointer;
  color: #409eff;
  visibility: visible;
}
.closeBtn:hover {
  cursor: pointer;
  color: #409eff;
}
.dot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: -30%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.dot_item {
  position: relative;
  margin: 10px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
}
.dot_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-30%, -35%);
  width: 30px;
  height: 30px;
}
.dot_item:hover {
  cursor: pointer;
  background-color: #409eff;
}
.dot_item.active {
  background-color: #409eff;
}

.demo-image__error .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__error .el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}
</style>